import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_plugin/base/widget/base_stateless_widget.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../constant/env.dart';
import '../../res/colors.dart';
import '../../res/style.dart';
import '../../res/text_style.dart';
import '../../routes/router_util.dart';
import 'login_logic.dart';

class LoginPage extends BaseStatelessWidget<LoginLogic> {
  LoginPage({Key? key}) : super(key: key);

  final logic = Get.find<LoginLogic>();
  final state = Get.find<LoginLogic>().state;

  @override
  String titleString() {
    return "";
  }

  ///创建AppBar ActionView
  @override
  List<Widget>? appBarActionWidget(BuildContext context) {
    return [
      TextButton(
          onPressed: () {
            RouterUtil.toLoginPswPage();
          },
          child: Container(
            padding: EdgeInsets.only(right: 5.w),
            child: Text(
              '密码登录',
              style: Styles.style_FFF06100_16_w400,
            ),
          ))
    ];
  }

  @override
  bool setTopBarStyleOrange() {
    return false;
  }

  @override
  Widget buildContent(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 32.w, top: 10.h, right: 32.w, bottom: 36.h),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            flex: 1,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "欢迎您使用臻情守护",
                  style: TextStyles.textStyle(const Color(0xFF333333), 24.sp, fontWeight: FontWeight.w600),
                  textAlign: TextAlign.left,
                ),
                Box.hBox74,
                TextFormField(
                  //用户名
                  controller: state.unameController,
                  keyboardType: TextInputType.number,
                  textAlign: TextAlign.start,
                  style: TextStyles.textStyle(const Color(0xFF333333), 20.sp, fontWeight: FontWeight.w400),

                  inputFormatters: <TextInputFormatter>[
                    LengthLimitingTextInputFormatter(11) //限制长度
                  ],

                  // autofocus: true,
                  textInputAction: TextInputAction.done,
                  // enabled: false,
                  maxLines: null,
                  decoration: InputDecoration(
                    hintText: "请输入手机号码",
                    filled: true,
                    fillColor: ColorStyle.color_FFF3F3F3,
                    contentPadding: EdgeInsets.fromLTRB(20.w, 10.h, 20.w, 10.h),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8.r), //圆角大小
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8.r),
                      borderSide: const BorderSide(width: 1, color: ColorStyle.color_FFF3F3F3),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8.r),
                      borderSide: const BorderSide(width: 1, color: ColorStyle.color_FFF3F3F3),
                    ),
                  ),

                  onChanged: (value) {
                    state.phoneNumber.value = value;
                    state.isPhoneError.value = false;
                    if (value.isNotEmpty) {
                      state.isBtnEnabled.value = true;
                    } else {
                      state.isBtnEnabled.value = false;
                    }
                  },
                ),
                Box.hBox15,
                Obx(() => state.isPhoneError.value ? _showPhoneError() : Container()),
                Box.hBox4,
                Center(
                  child: Text(
                    "未注册的手机号验证通过后将自动注册",
                    textAlign: TextAlign.center,
                    style: Styles.style_FF8C8C8C_12,
                  ),
                ),
                Box.hBox19,
                Obx(
                  () => SizedBox(
                    height: 52.h,
                    width: 312.w,
                    child: ElevatedButton(
                        onPressed: state.isBtnEnabled.value
                            ? () {
                                FocusScope.of(context).requestFocus(FocusNode());
                                logic.privacyCheck(state.unameController.text);
                              }
                            : null,
                        style: Styleutils.buttonStyleOrange(),
                        child: Text(
                          "验证并登录",
                          style: Styles.style_white_16_bold,
                        )),
                  ),
                ),
              ],
            ),
          ),
          _buildPrivacy(),
        ],
      ),
    );
  }

  Widget _showPhoneError() {
    return Column(
      children: [
        Box.hBox15,
        Center(
          child: Text(
            "手机号错误，请重新填写",
            style: Styles.style_FFE11E0D_12,
          ),
        )
      ],
    );
  }

  Widget _buildPrivacy() {
    return Row(
      children: [
        GestureDetector(
          onTap: () {
            state.privacyCheck.value = !state.privacyCheck.value;
          },
          child: Obx(() => Image(
                image: AssetImage(state.privacyCheck.value
                    ? 'assets/images/ic_check_circle_check.png'
                    : 'assets/images/ic_check_circle_uncheck.png'),
                width: 16.w,
                height: 16.h,
              )),
        ),
        Box.wBox6,
        Expanded(
          flex: 1,
          child: RichText(
            text: TextSpan(children: [
              TextSpan(
                text: "已阅读并同意",
                style: Styles.privacy_agreement_gray,
              ),
              TextSpan(
                  text: "《用户协议》",
                  style: Styles.privacy_agreement_blue,
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      RouterUtil.toWebPage("用户协议", Env.envConfig.userAgreementUrl);
                    }),
              TextSpan(
                text: "和",
                style: Styles.privacy_agreement_gray,
              ),
              TextSpan(
                  text: "《隐私协议》",
                  style: Styles.privacy_agreement_blue,
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      RouterUtil.toWebPage("隐私声明 ", Env.envConfig.privacyPolicyUrl);
                      // 查看 服务条款
                    }),
            ]),
          ),
        )
      ],
    );
  }
}
